<template>
  <div class="refund-list">
    <a-card style="margin-bottom: 10px">
      <div class="card-context">
        <div>
          <SearchOutlined /> <span style="margin-left: 10px">筛选搜索</span>
        </div>
        <div>
          <a-button style="margin-right: 20px">重置</a-button
          ><a-button type="primary">查询结果</a-button>
        </div>
      </div>
      <div style="padding: 20px">
        <a-form layout="inline">
          <a-form-item label="输入搜索">
            <a-input placeholder="请输入服务编号" />
          </a-form-item>
          <a-form-item label="用户账号">
            <a-input placeholder="请输入用户账号" />
          </a-form-item>
          <a-form-item label="申请状态">
            <a-select style="width: 175px" placeholder="请选择申请状态">
              <a-select-option value="1"> 待处理 </a-select-option>
              <a-select-option value="2"> 退货中 </a-select-option>
              <a-select-option value="3"> 已完成 </a-select-option>
              <a-select-option value="4"> 已拒绝 </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="申请时间">
            <a-date-picker />
          </a-form-item>
        </a-form>
      </div>
    </a-card>

    <a-card>
      <div class="card-context">
        <div>
          <BarsOutlined /><span style="margin-left: 10px">数据列表</span>
        </div>
      </div>
    </a-card>

    <a-table
      :columns="columns"
      :data-source="data"
      bordered
      ellipsis
      rowKey="refId"
      style="margin-top: 10px"
    >
      <template #action="{ record }">
        <a-button size="small" @click="gotoRefundInfo(record)">详情</a-button>
      </template>
      <template #money="{ record }">
        {{ "￥" + record.money }}
      </template>
      <template #refState="{ record }">
        <a-tag v-if="record.refState == 1" color="warning">待处理</a-tag>
        <a-tag v-if="record.refState == 2" color="processing">退货中</a-tag>
        <a-tag v-if="record.refState == 3" color="success">已完成</a-tag>
        <a-tag v-if="record.refState == 4" color="error">已拒绝</a-tag>
      </template>
    </a-table>
  </div>
</template>
<script>
const columns = [
  {
    title: "服务编号",
    dataIndex: "refId",
    key: "refId",
    align: "center",
  },
  {
    title: "申请时间",
    dataIndex: "refAppliyTime",
    key: "refAppliyTime",
    align: "center",
  },
  {
    title: "用户账号",
    dataIndex: "cusId",
    key: "cusId",
    align: "center",
  },

  {
    title: "退还金额",
    dataIndex: "money",
    key: "money",
    align: "center",
    slots: { customRender: "money" },
  },
  {
    title: "处理时间",
    dataIndex: "opTime",
    key: "opTime",
    align: "center",
  },
  {
    title: "申请状态",
    key: "refState",
    dataIndex: "refState",
    align: "center",
    slots: { customRender: "refState" },
  },
  {
    title: "操作",
    key: "action",
    align: "center",
    slots: { customRender: "action" },
  },
];

const data = [];

import { BarsOutlined, SearchOutlined } from "@ant-design/icons-vue";

export default {
  components: {
    BarsOutlined,
    SearchOutlined,
  },
  data() {
    return {
      data,
      columns,
    };
  },
  mounted() {
    this.getAllRefund();
  },
  methods: {
    //去 信息页
    gotoRefundInfo(record) {
      this.$router.push({
           path:'/home/Order/RefundInfo',
           query:{
             refId:record.refId
           },
        })

    },
    getAllRefund() {

      this.$axios
        .get("/admin/refund/getAllRefund")
        .then((res) => {
          this.data = res.data.data;
          console.log(this.data);
        })
        .catch((err) => {
          console.error(err);
        });
    },
  },
};
</script>

<style lang="less" scoped>
.refund-list {
  padding: 24px;
  background-color: #fff;
  margin: 24px 16px;
}
.card-context {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-context > div:nth-child(1) {
  font-size: 20px;
}
</style>